<template>
  <view class="map_wrap" style="height: 100%;">
    <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar
			title="创作中心">
    </uni-nav-bar>
				
    <!-- <up-navbar
            leftText="返回"
            title="个人中心"
            :safeAreaInsetTop="false"
            :bgColor="bgColor"
        >
            <template #left>
                <view
                    class="u-nav-slot"
                >
                    <up-icon
                        name="arrow-left"
                        size="19"
                    ></up-icon>
                    
                </view>
          </template>
	</up-navbar> -->
      <!-- <map id="mapSelected" style="width: 100%; height: 300px; margin-left: 30rpx;" :latitude="latitude" :longitude="longitude" :markers="covers" :controls="controls" :scale="18" @controltap="controltap" @tap="clickMap" 
      @regionchange="regionchange">
      </map>
      
  <view class="mform">
    <view class="item">
      <view class="t">当前地址：</view>
      <view class="m">{{address}}</view>
    </view>
    <view class="item">
      <view class="t">推荐地址：</view>
      <view class="m">{{address_info}}</view>
    </view>
  </view> -->
  <!-- <up-popup :show="show" @close="close" mode="center" @open="open">
            <view>
                <text>出淤泥而不染，濯清涟而不妖</text>
            </view>
		</up-popup> -->

    <up-modal :show="show" :title="title"  :closeOnClickOverlay="true" @confirm="close">
      <view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
    </up-modal>
  <up-icon name="photo" color="#2979ff" size="28"></up-icon>
  <up-image :show-loading="true" :src="src" width="80px" height="80px" @click="click"></up-image>
      <!-- 保存按钮 -->
  <view class="btnbox" style="padding: 20px;">
    <up-button type="primary" :plain="true" text="镂空"></up-button>
    <up-button class="btn" type="success" @click="show = true" style="width:85%;">保存</up-button>
  </view>
  <uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
<tabbar></tabbar>

  </view>
</template>

<script setup>
import { ref } from 'vue';
const disabled = ref(true);
const tabBar = ref([
				{
					"pagePath": "pages/index/index",
					"iconPath":"home",
					"selectedIconPath":"home-fill",
					"text": "寻梦"
				}, {
					"pagePath": "pages/user/index",
					"iconPath":"home",
					"selectedIconPath":"home-fill",
					"text": "创作"
				}, {
					"pagePath": "pages/test_page/index",
					"iconPath":"home",
					"selectedIconPath":"home-fill",
					"text": "我的"
				}
			]);
const city = ref("杭州");
const bgColor = ref('#001f3f'); 
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const value6 = 0;
const click1 = (e) =>{
	console.log('click1', e);
}
const click = () => {
  // 点击事件处理逻辑
};
// 创建响应式数据  
const show = ref(false);  
  
// 定义方法  
function open() {  
  // 打开逻辑，比如设置 show 为 true  
  show.value = true;  
  // console.log('open');  
}  
  
function close() {  
  // 关闭逻辑，设置 show 为 false  
  show.value = false;  
  // console.log('close');  
}  
// 使用 ref 创建响应式数据  
// const show = ref(false);  
const title = ref('标题');  
const content = ref(`空山新雨后<br>  
                      天气晚来秋`); 
// export default {
// data() {
//   return {
//     title: 'map',
//     latitude: 39.909,// 默认纬度
//     longitude: 116.39742,// 默认经度(北京天安门)
//     covers: [{
//       id: 110, 
//       latitude: 39.909,
//       longitude: 116.39742,
//       iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
//       width: "20",
//       height: "20"
//     }],
//     controls: [{ // 控件
//       id: 99,
//       position: { // 控件位置
//         left: 160,
//         top: 120
//       },
//       iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
//     }],
//     address_info :"",
//     address_info_recomd:"",
//     address :""
//   }
// },
// onLoad(){
//   // this.isGetLocation();
// },
// methods: {
//   isGetLocation(a = "scope.userLocation") { //检查当前是否已经授权访问scope属性
//     var _this = this;
//     uni.getSetting({
//         success(res) {
//             console.log(res)
//             if (!res.authSetting[a]) { //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
//                 _this.getAuthorizeInfo()
//             } else {
//                 //方式一
//                 // _this.getLocationInfo();
//                 // 方式二
//                 _this.getLocation();
//             }
//         }
//     });
//   },
//   getAuthorizeInfo(a = "scope.userLocation") { // uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
//       var _this = this;
//       uni.authorize({
//           scope: a,
//           success() { //允许授权
//         //方式一
//               // _this.getLocationInfo();
//         // 方式二
//         _this.getLocation();
//           }
//       })
//   },
//   //点击地图时
//   clickMap(e){
//     console.log("点击地图时:"+e);
//     this.latitude=e.detail.latitude;
//     this.longitude = e.detail.longitude;
//   },
//   getLocationInfo () {
//     //直接调用即可
//       uni.chooseLocation({
//           success: (res) => {
//               console.log(res)
//         if(res.errMsg == "chooseLocation:ok"){
//           this.address_info = res.name + res.address;
//           this.latitude= res.latitude;
//           this.longitude = res.longitude;
//         }
//           }
//       })
//   },
//   //获取当前所在位置的经纬度
//   getLocation(){
//     uni.getLocation({
//         type: 'gcj02',
//         success: (res) => {
//             console.log(res)
//             this.latitude = res.latitude.toString()
//             this.longitude = res.longitude.toString()
                            
//             // 获取地理位置详情信息
//             this.getLocationDetail()
//         }
//     });
//   },
//   //根据经纬度获取详细的地址
//   getLocationDetail () {
//       uni.request({
//           header: {
//               "Content-Type": "application/text"
//           },
//           url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + this.latitude + ',' + this.longitude +
//                           '&key=X4ZBZ-VNRKL-XNHPV-MN4KJ-ANQKZ-ZEBSJ',
//           success:(re)=> {
//               //成功获取到经纬度
//               console.log(re)
//               if (re.statusCode == 200) {
//                   this.address_info_recomd = re.data.result.formatted_addresses.recommend
//                   this.address_info = re.data.result.address_reference.town.title + re.data.result.address_reference.street.title + re.data.result.address_reference.landmark_l2.title
//                   this.address = re.data.result.address
                              
//               } else {
//                   uni.showToast({
//                       title: '获取地理位置失败，请重试',
//                       icon: "none"
//                   })
//               }
//           }
//       });
//   },
//   // 在地图渲染更新完成时触发
//   regionchange (e) {
//     console.log(e)
//     if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
//       this.mapCtx = uni.createMapContext("mapSelected"); // 创建map的上下文对象, 从而操控map组件
//       this.mapCtx.getCenterLocation({
//         success: (res) => {
//           console.log(res)
//           this.latitude = res.latitude;
//           this.longitude = res.longitude;
//           this.getLocationDetail();
//         }
//       })
//     }
//   },
// }
// }
</script>
<style  lang="scss">
  $nav-height: 30px;

  .box-bg {
    background-color: #F5F5F5;
    padding: 5px 0;
  }

  .city {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    // width: 160rpx;
    margin-left: 4px;
  }

  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 500rpx;
    flex: 1;
    background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
  }
</style>